<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>Sass: Install Sass</title>
    <meta content="Syntatically Awesome Style Sheets" name="description">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="./css/main.css" rel="stylesheet">
</head>
<body class="install">
<div class="page">
    <div class="alert stickers">
        <div class="container">
            <p>
                <strong>Your laptop needs more Sass.</strong>
                <a href="http://devswag.com/products/sass-stickers-4">Grab a set of Sass stickers now</a>. </p>
        </div>
    </div>
    <div class="pop-stripe"></div>
    <header class="banner" role="banner">
        <div class="container">
            <h1 class="site-brand">
                <a href="/">
                    <img height="48" alt="Sass" src="./images/logo.svg">
                </a>
            </h1>
            <nav class="navigation collapse" role="navigation">
                <ul>
                    <li><a href="./install.html">Install</a></li>
                    <li><a href="./guide.html">Learn Sass</a></li>
                    <li><a href="http://blog.sass-lang.com/">Blog</a></li>
                    <li><a href="../documentation/file.SASS_REFERENCE.html">Documentation</a></li>
                    <li><a href="./community.html">Get Involved</a></li>
                    <li><a href="./libsass.html">libSass</a></li>
                </ul>
            </nav>
            <div class="banner-toggle">
                <button data-target=".navigation" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </header>
    <div class="page-header">
        <div class="container">
            <h1> Install Sass </h1>
        </div>
    </div>
    <div class="body">
        <div class="container">
            <div class="content">
                <main class="main" role="main"><h2>There are a couple of ways to start using&nbsp;Sass:</h2>
                    <ol class="list-columns">
                        <li class="gui-application"><h3>Applications</h3>
                            <p><img class="header-image" height="160" alt="Mouse"
                                    src="./images/install_1.svg"></p>
                            <p> There are a good many applications that will get you up and running with Sass in a few
                                minutes for Mac, Windows, and Linux. You can download most of the applications for free
                                but a few of them are paid apps
                                <small>(and totally worth it)</small>
                                .
                            </p>
                            <ul class="list-feature">
                                <li><a href="http://incident57.com/codekit/">CodeKit</a> <span
                                        class="info">(Paid)</span> <span class="mac-icon"></span></li>
                                <li><a href="http://compass.handlino.com/">Compass.app</a> <span class="info">(Paid, Open Source)</span>
                                    <span class="mac-icon"></span> <span class="windows-icon"></span> <span
                                            class="linux-icon"></span></li>
                                <li><a href="http://www.vanamco.com/ghostlab/">Ghostlab</a> <span
                                        class="info">(Paid)</span> <span class="mac-icon"></span> <span
                                        class="windows-icon"></span></li>
                                <li><a href="http://hammerformac.com/">Hammer</a> <span class="info">(Paid)</span> <span
                                        class="mac-icon"></span></li>
                                <li><a href="http://koala-app.com/">Koala</a> <span class="info">(Open Source)</span>
                                    <span class="mac-icon"></span> <span class="windows-icon"></span> <span
                                            class="linux-icon"></span></li>
                                <li><a href="http://livereload.com/">LiveReload</a> <span class="info">(Paid, Open Source)</span>
                                    <span class="mac-icon"></span> <span class="windows-icon"></span></li>
                                <li><a href="https://prepros.io/">Prepros</a> <span class="info">(Paid)</span> <span
                                        class="mac-icon"></span> <span class="windows-icon"></span> <span
                                        class="linux-icon"></span></li>
                                <li><a href="http://mhs.github.io/scout-app/">Scout</a> <span
                                        class="info">(Open Source)</span> <span class="mac-icon"></span> <span
                                        class="windows-icon"></span></li>
                            </ul>
                        </li>
                        <li class="command-line-unix"><h3>Command Line</h3>
                            <p><img class="header-image" height="160" alt="Keyboard" src="./images/install_2.svg"></p>
                            <dl id="install-ruby-linux">
                                <dt>Linux</dt>
                                <dd> If you're using a distribution of Linux, you'll need to install Ruby first. You can
                                    install Ruby through the apt package manager, rbenv, or rvm. <pre>sudo su -c "gem install sass"</pre>
                                </dd>
                            </dl>
                            <dl id="install-ruby-windows">
                                <dt>Windows</dt>
                                <dd> Before you start using Sass you will need to install Ruby. The fastest way to get
                                    Ruby on your Windows computer is to use <a href="http://rubyinstaller.org">Ruby
                                        Installer</a>. It's a single-click installer that will get everything set up for
                                    you super fast.
                                </dd>
                                <dd> The installer will also install a Ruby command line powershell application that
                                    will let you use the Ruby libraries.
                                </dd>
                                <dl id="install-ruby-mac">
                                    <dt>Mac</dt>
                                    <dd> If you prefer the command line over an application then getting Sass set up is
                                        a fairly quick process. Sass has a Ruby dependency but if you're using a Mac,
                                        congratulations, Ruby comes pre-installed.
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>Install Sass</dt>
                                    <dd><p> Here's the quickest way we've found to start using Sass by using the command
                                        line: </p>
                                        <ol>
                                            <li><p><strong>Open your Terminal or Command Prompt.</strong> On the Mac the
                                                Terminal.app comes installed by default. It's located in your
                                                "Utilities" folder. On Windows, run `cmd`. </p></li>
                                            <li><p><strong>Install Sass.</strong> Ruby uses Gems to manage its various
                                                packages of code like Sass. In your open terminal window type: </p>
                                                <pre>gem install sass</pre>
                                                <p> This will install Sass and any dependencies for you. It's pretty
                                                    magical. If you get an error message then it's likely you will need
                                                    to use the <code>sudo</code> command to install the Sass gem. It
                                                    would look like: </p> <pre>sudo gem install sass
</pre>
                                            </li>
                                            <li><p><strong>Double-check.</strong> You should now have Sass installed,
                                                but it never hurts to double-check. In your terminal application you can
                                                type: </p>
                                                <pre>sass -v</pre>
                                                <p>It should return <code>Sass 3.4.22 (Selective Steve)</code>.
                                                    Congratulations! You've successfully installed Sass.</p></li>
                                            <li><p><strong>Go and play.</strong> If you're brand new to Sass we've set
                                                up some resources to help you learn pretty darn quick. </p>
                                                <p><a class="button primary" href="/guide">Learn More About Sass</a></p>
                                            </li>
                                        </ol>
                                    </dd>
                                </dl>
                            </dl>
                        </li>
                    </ol>
                </main>
            </div>
        </div>
    </div>
    <div class="alert release">
        <div class="container">
            <ul>
                <li>Current Release: <span class="release-name">Selective Steve (3.4.22)</span></li>
                <li><a href="../documentation/file.SASS_CHANGELOG.html">Release Notes</a></li>
                <li><a href="https://github.com/sass/sass">Fork on Github</a></li>
                <li><a href="implementation">Implementation Guide</a></li>
            </ul>
        </div>
    </div>
</div>
<footer class="contentinfo" role="contentinfo">
    <nav class="container">
        <ul>
            <li class="contentinfo-legal"><p>Sass © 2006–2015 <a href="http://www.hamptoncatlin.com/">Hampton Catlin</a>,
                <a href="http://nex-3.com/">Natalie Weizenbaum</a>, <a href="http://chriseppstein.github.io/">Chris&nbsp;Eppstein</a>,
                and&nbsp;numerous&nbsp;contributors.</p>
                <p>It is available for use and modification under the <a
                        href="http://sass-lang.com/docs/yardoc/file.MIT-LICENSE.html">MIT&nbsp;License</a>.</p></li>
            <li class="contentinfo-tools">
                <ul>
                    <li><a href="https://github.com/sass">Sass on GitHub</a></li>
                    <li><a href="https://github.com/sass/sass-site">Website Repo</a></li>
                    <li><a href="/styleguide">Style Guide</a></li>
                    <li><a href="/community-guidelines">Community Guidelines</a></li>
                </ul>
            </li>
            <li class="contentinfo-social">
                <a class="twitter-follow-button" data-show-count="false" data-size="large"
                   href="https://twitter.com/SassCSS">Follow @SassCSS</a>
            </li>
        </ul>
    </nav>
</footer>
</body>
</html>